﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="Lei Shi">
  <meta http-equiv="Cache-Control" content="o-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">
  <meta name="csrf-token" content="1483758872##fd2cac389b2b7c009a744bcaecaa41d71592cfe8">


        <title>education - 做实验，学编程</title>




    <meta content="education是国内领先的IT技术实训平台，创新的实验驱动教学模式，以就业为导向，为IT相关专业的在校学生及从业者提供编程、运维、测试、云计算、大数据、数据库等全面的IT技术动手实践环境，提供Linux、Python、Java、C语言、Ruby、Android、IOS开发等热门课程。" name="description">
    <meta content="education,IT培训,IT教育,编程,在线编程,Linux,Linux教程,Linux操作系统,Python,Python教程,Python基础教程,Java,Java编程,C语言,大数据,Node.js,Hadoop,PHP,Docker" name="keywords">

    <meta content="education,琛石科技" name="author">
	<link rel="stylesheet" href="static/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/highlight.js/9.8.0/monokai-sublime.min.css">
    <link rel="stylesheet" href="app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="app/css/libs/katex/0.6.0/katex.min.css">
    <link rel="stylesheet" href="app/css/libs/videojs/5.11.7/video-js.min.css">
	<link rel="stylesheet" href="app/css/dest/styles.css?=2016121272249">
    <link rel="stylesheet"  href="css/eye.css">

    <script src="js/http.js"></script>
    <script src="static/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/loginAndregister.js"></script>

	<style>
		@font-face {
			font-family: "lantingxihei";
			src: url("fonts/FZLTCXHJW.TTF");
		}

        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }
		#invite-user .modal-body .form-label {
			margin-bottom: 16px;
			font-size:14px;
		}
		#invite-user .modal-body .form-invite {
			width: 80%;
			padding: 6px 12px;
			background-color: #eeeeee;
			border: 1px solid #cccccc;
			border-radius: 5px;
			float: left;
			margin-right: 10px;
		}
		#invite-user .modal-body .msg-modal-style {
			background-color: #7dd383;
			margin-top: 10px;
			padding: 6px 0;
			text-align: center;
			width: 100%;
		}
		#invite-user .modal-body .modal-flash {
			position: absolute;
			top: 53px;
			right: 74px;
			z-index: 999;
		}
		/* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
        .org-header {
            padding: 100px 0;
            color: #fff;
            background: url(img/org-bg.png);
            text-align: center;
        }
        .org-header h2 {
            font-size: 45px;
        }
        .org-header p {
            margin-top: 20px;
            font-size: 18px;
            font-weight: 700;
        }
        .org-body-desc {
            padding: 50px 0 150px;
        }
        .org-body-desc .media-body {
            font-size: 16px;
        }
        .org-body-courses {
            padding: 50px 0;
            background: #fff;
        }
        .org-body-courses .container {
            position: relative;
            top: -110px;
        }
        .org-body-courses .media {
            display: block;
            padding: 10px;
            margin-bottom: 50px;
            color: #333;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 4px 2px #eee;
        }
        .org-body-courses .media:hover,
        .org-body-courses .media:focus {
            text-decoration: none;
        }
        .org-body-courses .media img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            box-shadow: 0 0 4px 2px #eee;
        }
        .org-body-courses .media-body h4 {
            word-break: break-all;
            font-size: 16px;
            line-height: 1.6em;
        }
        .org-course-more {
            text-align: center;
        }
        .org-course-more .btn {
            padding: 4px 20px;
            border-radius: 4px;
        }
    </style>

<style type="text/css">
.navbar-banner {
    margin-top: 50px;
    background: url("img/homepage-bg.png");
    background-size: cover;
    backgtound-repeat: no-repeat;
}
</style>


</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top header">
    <script src="js/home_header.js"></script>
</nav>



<div class="org-header" >
    <h2>学习企业级开发知识和算法培训</h2>
    <p>不用重复造轮子，成为最高效的互联网开发者</p>
</div>

<div class="introduce-container" id="fourFeatures">
    <div class="container">
        <div class="row">
            <div class="introduce-unit col-sm-6 col-md-3">
                <div><a class="introduce-img"><img src="img/introduceContainer1.gif" /></a></div>
<!--                <div><span class="introduce-span">**************</span></div>-->
            </div>
            <div class="introduce-unit col-sm-6 col-md-3">
                <div><a class="introduce-img"><img src="img/introduceContainer2.gif" /></a></div>
<!--                <div><span class="introduce-span">**************</span></div>-->
            </div>
            <div class="introduce-unit col-sm-6 col-md-3">
                <div><a class="introduce-img"><img src="img/introduceContainer3.gif" /></a></div>
<!--                <div><span class="introduce-span">**************</span></div>-->
            </div>
            <div class="introduce-unit col-sm-6 col-md-3">
                <div><a class="introduce-img"><img src="img/introduceContainer4.gif" /></a></div>
<!--                <div><span class="introduce-span">**************</span></div>-->
            </div>
        </div>
    </div>
</div>

<!--热门课程-->
<div class="line-and-laboratory">
    <div class="container">
        <div class="clearfix text-center item-header">

            <div class="text-center item-title">热门课程</div>

        </div>
        <div class="clearfix courses" id="vue">
            <div class="col-md-3 col-sm-6  course" v-for="courses in PopularCoursesList">
                <a class="course-box" href="#" onclick="courseJump(this)">
                    <P style="visibility: hidden" id="coursesId">{{courses.id}}</P>
                    <div class="course-img">
                        <img alt="Linux 基础入门（新版）" :src="courses.imgUrl">
                    </div>
                    <div class="course-body">
                            <span class="course-title" data-toggle="tooltip" data-placement="bottom">{{courses.title}}</span>

                    </div>
                    <div class="course-footer">
			<span class="course-per-num pull-left">

                {{courses.viewCount}}

			</span>


                    </div>
                </a>
            </div>
        </div>
        <div class="clearfix item-footer">
            <div class="pull-right watch-all">
                <a href="courses/index.html">查看更多 ></a>
            </div>
        </div>
    </div>
</div>








	<div class="modal fade" id="invite-user" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">邀请好友，双方都可获赠实验豆！</h4>
				</div>
				<div class="modal-body">

                        <p><h4><a href="#sign-modal" data-toggle="modal" data-sign="signin">登录</a>后邀请好友注册，您和好友将分别获赠3个实验豆！</h4></p>

					<div id="msg-modal"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="flash-message" tabindex="-1" role="dialog">
		<div class="modal-dialog" rolw="document">
		</div>
	</div>
	<div class="modal fade" id="modal-message" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">注意</h4>
				</div>
				<div class="modal-body">
				</div>
				<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirm" data-dismiss="modal">确定</button>
				</div>
			</div>
		</div>
	</div>












    <div id="base-data"


            data-flash="false"



        data-is-login=false

        data-is-jwt=true
        data-socket-url="wss://comet.shiyanlou.com"
        data-msg-user=""
        data-msg-system=""
    ></div>

    <script src="app/dest/lib/lib.js?=2016121272249"></script>
    <script src="static/ace/1.2.5/ace.js"></script>
    <script src="static/aliyun/aliyun-oss-sdk-4.3.0.min.js"></script>
    <script src="static/highlight.js/9.8.0/highlight.min.js"></script>
    <script src="static/jspdf/1.2.61/jspdf.min.js"></script>
    <script src="static/plupload/2.1.9/js/plupload.full.min.js"></script>
    <script src="static/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
    <script src="static/videojs/video.min.js"></script>
    <script src="static/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>
    <script src="static/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
    <script src="static/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/bootstrap-table/1.11.0/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>









<div id="jinja-data"
    data-post-url="/registercheck"
></div>

<script src="app/dest/frontend/index.js?=2016121272249"></script>






<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 clearfix footer-col">
                <img src="img/logo_03.png">
                <div class="footer-slogan">动手做实验，轻松学编程</div>
                <div class="col-xs-2">
                    <div class="social-item footer-weixin-item">
                        <i class="fa fa-weixin"></i>
                        <div class="footer-weixin">
                            <img src="img/footer-weixin.png">
                        </div>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="social-item footer-qq-item">
                        <i class="fa fa-qq"></i>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="social-item footer-weibo-item">
                        <a href="http://weibo.com/shiyanlou2013" target="_blank">
                            <i class="fa fa-weibo"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">公司</div>
                <a href="privacy/index.html" target="_blank">关于我们</a><br>
                <a href="privacy/index.html" target="_blank">联系我们</a><br>
                <a href="" target="_blank">加入我们</a><br>
                <a href="" target="_blank">技术博客</a><br>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">合作</div>
                <a href="privacy/index.html" target="_blank">我要投稿</a><br>
                <a href="labs/index.html" target="_blank">教师合作</a><br>
                <a href="edu/index.html" target="_blank">高校合作</a><br>
                <a href="privacy/index.html" target="_blank">友情链接</a>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">服务</div>
                <a href="bootcamp/index.html" target="_blank">实战训练营</a><br>
                <a href="vip/index.html" target="_blank">会员服务</a><br>
                <a href="courses/reports.html" target="_blank">实验报告</a><br>
                <a href="questions/index.html?tag=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98" target="_blank">常见问题</a><br>
                <a href="privacy/index.html" target="_blank">隐私条款</a>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">学习路径</div>
                <a href="paths/index.html" target="_blank">Python学习路径</a><br>
                <a href="paths/index.html" target="_blank">Linux学习路径</a><br>
                <a href="paths/index.html" target="_blank">大数据学习路径</a><br>
                <a href="paths/index.html" target="_blank">Java学习路径</a><br>
                <a href="paths/index.html" target="_blank">PHP学习路径</a><br>
                <a href="paths/index.html", target="_blank">全部</a>
            </div>
        </div>
    </div>
    <div class="text-center copyright">
        <span>Copyright @2013-2016 education在线教育</span>
        <span class="ver-line"> | </span>
        <a href="http://www.bootstrapmb.com/" target="_blank">蜀ICP备13019762号</a>

    </div>
</div>
<script type="application/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            PopularCoursesList: []
        },
        mounted: function () {
            //定义参数
            let thisObj = this;
            //请求地址
            let url = "/education_api/course/querByPopularCourses";
            httpPost(url, function (resp) {
                console.log(resp);
                thisObj.PopularCoursesList = resp;


            });

        }

    });
    function courseJump(obj) {
        let courseId = $(obj).children("#coursesId").html();
        console.log(courseId);
        location.href="courses/course_detail.html?"+courseId


    }



</script>





</body>
</html>
